<template>
	<!-- pages/canvas/canvas.wxml -->
	<view class="canvas-container">
		<view class="canvas-wrap">
			<canvas type="2d" :disable-scroll="true" @touchstart="handleTouchStart" @touchmove="handleTouchMove"
				@touchend="handleTouchEnd" id="myCanvas"></canvas>
		</view>
		<view class="canvas-btn-wrap">
			<button type="primary" @tap="handleSaveCanvas" class="canvas-btn">保存本地</button>
			<button type="warn" @tap="handleClearCanvas" class="canvas-btn">清空</button>
		</view>
	</view>
</template>

<script>
	// pages/canvas/canvas.js
	import SignaturePad from '../../utils/signature_pad.js';
	export default {
		data() {
			return {
				canvas: null,
				signaturePad: new SignaturePad()
			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad: function(options) {},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {
			var that = this;
			const query = uni.createSelectorQuery();
			query
				.select('#myCanvas')
				.fields({
					node: true,
					size: true
				})
				.exec((res) => {
					const canvas = res[0].node;
					const ctx = canvas.getContext('2d');
					const dpr = uni.getSystemInfoSync().pixelRatio;
					canvas.width = res[0].width * dpr;
					canvas.height = res[0].height * dpr;
					ctx.scale(dpr, dpr);
					this.signaturePad.init(canvas);
					that.canvas = canvas
				}); // const signaturePad = new SignaturePad(context)
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			handleTouchStart(event) {
				this.signaturePad.handleTouchStart(event);
			},

			handleTouchMove(event) {
				this.signaturePad.handleTouchMove(event);
			},

			handleTouchEnd(event) {
				this.signaturePad.handleTouchEnd(event);
			},

			handleSaveCanvas(event) {
				if (!this.canvas) {
					return;
				}
				uni.canvasToTempFilePath({
					canvas: this.canvas,
					success(res) {
						console.log(res)
						uni.request({
							url: res.tempFilePath, //临时路径
							responseType: 'arraybuffer', //设置返回的数据格式为arraybuffer
							success: res => {
								const base64 = "data:image/png;base64," + uni.arrayBufferToBase64(
									res.data)
								console.log(base64)
								// that.baseAddress = base64
							}
						})
					}
				})
				return
				uni.canvasToTempFilePath({
					canvas: this.canvas,
					success: (res) => {
						uni.saveImageToPhotosAlbum({
							filePath: `${res.tempFilePath}`,

							success(res) {
								uni.showToast({
									title: '保存成功'
								});
							},

							fail(err) {
								uni.showToast({
									title: '保存失败'
								});
							}
						});
					}
				});
			},

			handleClearCanvas(event) {
				this.signaturePad.clear();
			}
		}
	};
</script>
<style>
	@import './canvas.css';
</style>
